<template>
  <div class="hello">
    <el-upload
      ref="upload"
      class="upload-demo"
      drag
      action="#"
      :auto-upload="false">
      <i class="el-icon-upload"/>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  <div>------------------------------------------------------------------------------------------------------</div>
    <div>
      <el-button type="primary" round @click="preview">预览</el-button>
    </div>
<!--    <el-button type="success" round @click="download">下载</el-button>
    <el-button type="success" round @click="downloadThymeleaf">下载thymeleaf</el-button>-->
    <el-dialog :visible.sync="dialogVisible" :fullscreen="true">
      <div ref="file"></div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
// 引入docx-preview插件
let docx = require('docx-preview')

export default {
  name: 'Preview',
  data() {
    return {
      vHtml: '',
      dialogVisible: false
    }
  },
  props: {
    msg: String
  },
  mounted() {

  },
  methods: {
    // 预览方式1，只传数据，不需要模板
    preview11() {
      axios({
        url: 'http://localhost:9111/eventLinkagePreplan/v1/pre',
        method: 'post',
        data:{
          "id": "202304131500001",
          "planName": "预案二",
          "planDescription": "预案说明",
          "time": "2023-04-14 10:27:42",
          "assetsId": "EQ1607936622458961920",
          "assetsName": null,
          "triggerRule": "触发规则",
          "locationId": null,
          "triggerMechanismMode": "0",
          "eventInfluenceArea": null,
          "devices": [{
            "assetsId": "EQ1607937538289434624",
            "assetsName": "55寸LCD显示单元4",
            "positionBname": null,
            "displayMode": null,
            "isBim": "1"
          }, {
            "assetsId": "EQ1641326965925478400",
            "assetsName": "直燃机测试",
            "positionBname": "榆林市星元医院,榆林市星元医院,综合楼,-1F,A区,地下机动车停放处",
            "displayMode": null,
            "isBim": "2"
          }, {
            "assetsId": "EQ1607945162401644544",
            "assetsName": "低压配电室多功能远传电表37",
            "positionBname": null,
            "displayMode": null,
            "isBim": "1"
          }, {
            "assetsId": "EQ1607946079817564160",
            "assetsName": "HDMI线缆6",
            "positionBname": null,
            "displayMode": null,
            "isBim": "2"
          }, {
            "assetsId": "EQ1607974681011421184",
            "assetsName": "低压配电室多功能远传电表250",
            "positionBname": null,
            "displayMode": null,
            "isBim": "1"
          }, {
            "assetsId": "EQ1607938459656388608",
            "assetsName": "气动壁挂单元（含安装框架）3",
            "positionBname": null,
            "displayMode": null,
            "isBim": "2"
          }, {
            "assetsId": "EQ1607973901680377856",
            "assetsName": "HDMI输入板卡",
            "positionBname": null,
            "displayMode": null,
            "isBim": "2"
          }, {
            "assetsId": "EQ1607934849258225664",
            "assetsName": "防火墙1",
            "positionBname": null,
            "displayMode": null,
            "isBim": "2"
          }, {
            "assetsId": "EQ1620611389943054336",
            "assetsName": "安防",
            "positionBname": "榆林市星元医院,榆林市星元医院,综合楼,-1F,A区,地下机动车停放处",
            "displayMode": null,
            "isBim": "1"
          }
          ],
          "users": [{
            "team": "救火团队",
            "userList": [{
              "userName": "202207021400002",
              "principalPerson": "1",
              "isMessage": "0"
            }, {
              "userName": "202208021500002",
              "principalPerson": "0",
              "isMessage": "0"
            }
            ]
          }
          ]
        },
        responseType: 'arraybuffer'
      }).then(res => {
        this.dialogVisible = true
        this.$nextTick(() => {
          docx.renderAsync(res.data, this.$refs.file)
        })
      }).catch(err => {
        console.log(err)
        this.$message.error('预览失败')
      })
    },
    // 预览方式2
    preview() {
      // 创建： FormData 对象
      var formData = new FormData()
      // file 为想要上传的文件
      formData.append('file', this.$refs.upload.uploadFiles[0].raw)
      var goodInfo = JSON.stringify({
        "id": "202304131500001",
        "planName": "预案二",
        "planDescription": "预案说明",
        "time": "2023-04-14 10:27:42",
        "assetsId": "EQ1607936622458961920",
        "assetsName": null,
        "triggerRule": "触发规则",
        "locationId": null,
        "triggerMechanismMode": "0",
        "eventInfluenceArea": null,
        "devices": [{
          "assetsId": "EQ1607937538289434624",
          "assetsName": "55寸LCD显示单元4",
          "positionBname": null,
          "displayMode": null,
          "isBim": "1"
        }, {
          "assetsId": "EQ1641326965925478400",
          "assetsName": "直燃机测试",
          "positionBname": "榆林市星元医院,榆林市星元医院,综合楼,-1F,A区,地下机动车停放处",
          "displayMode": null,
          "isBim": "2"
        }, {
          "assetsId": "EQ1607945162401644544",
          "assetsName": "低压配电室多功能远传电表37",
          "positionBname": null,
          "displayMode": null,
          "isBim": "1"
        }, {
          "assetsId": "EQ1607946079817564160",
          "assetsName": "HDMI线缆6",
          "positionBname": null,
          "displayMode": null,
          "isBim": "2"
        }, {
          "assetsId": "EQ1607974681011421184",
          "assetsName": "低压配电室多功能远传电表250",
          "positionBname": null,
          "displayMode": null,
          "isBim": "1"
        }, {
          "assetsId": "EQ1607938459656388608",
          "assetsName": "气动壁挂单元（含安装框架）3",
          "positionBname": null,
          "displayMode": null,
          "isBim": "2"
        }, {
          "assetsId": "EQ1607973901680377856",
          "assetsName": "HDMI输入板卡",
          "positionBname": null,
          "displayMode": null,
          "isBim": "2"
        }, {
          "assetsId": "EQ1607934849258225664",
          "assetsName": "防火墙1",
          "positionBname": null,
          "displayMode": null,
          "isBim": "2"
        }, {
          "assetsId": "EQ1620611389943054336",
          "assetsName": "安防",
          "positionBname": "榆林市星元医院,榆林市星元医院,综合楼,-1F,A区,地下机动车停放处",
          "displayMode": null,
          "isBim": "1"
        }
        ],
        "users": [{
          "team": "救火团队",
          "userList": [{
            "userName": "202207021400002",
            "principalPerson": "1",
            "isMessage": "0"
          }, {
            "userName": "202208021500002",
            "principalPerson": "0",
            "isMessage": "0"
          }
          ]
        }
        ]
      })
      formData.append('data', new Blob([goodInfo], { type: 'application/json' }))
      axios({
        headers:{
          'Content-Type': 'multipart/form-data'
        },
        url: 'http://localhost:9111/eventLinkagePreplan/v1/pre',
        method: 'post',
        data:formData,
        responseType: 'arraybuffer'
      }).then(res => {
        this.dialogVisible = true
        this.$nextTick(() => {
          docx.renderAsync(res.data, this.$refs.file)
        })
      }).catch(err => {
        console.log(err)
        this.$message.error('预览失败')
      })
    },
    download() {
      axios.defaults.responseType = 'blob'
      axios({
        url: '/api/downloadWord',
        method: 'post'
      }).then(res => {
        let contentDisposition = res.headers['content-disposition']
        // 将URL参数数值转成汉字
        let fileName = decodeURI(contentDisposition.substring(contentDisposition.indexOf('=') + 1))
        // 处理IE以及IE内核的浏览器兼容问题
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(res.data, fileName)
        } else {
          // 处理google firefox浏览器兼容问题
          let url = window.URL.createObjectURL(new Blob([res.data]))
          let a = document.createElement('a')
          a.style.display = 'none'
          a.href = url
          a.setAttribute('download', fileName)
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          window.URL.revokeObjectURL(url)
        }
        this.$message({
          message: '下载成功',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
        this.$message.error('下载失败')
      })
    },
    downloadThymeleaf() {
      axios.defaults.responseType = 'blob'
      axios({
        url: '/api/downloadThymeleafWord',
        method: 'post'
      }).then(res => {
        let contentDisposition = res.headers['content-disposition']
        // 将URL参数数值转成汉字
        let fileName = decodeURI(contentDisposition.substring(contentDisposition.indexOf('=') + 1))
        // 处理IE以及IE内核的浏览器兼容问题
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(res.data, fileName)
        } else {
          // 处理google firefox浏览器兼容问题
          let url = window.URL.createObjectURL(new Blob([res.data]))
          let a = document.createElement('a')
          a.style.display = 'none'
          a.href = url
          a.setAttribute('download', fileName)
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          window.URL.revokeObjectURL(url)
        }
        this.$message({
          message: '下载成功',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
        this.$message.error('下载失败')
      })
    }
  }
}
</script>

<style scoped>
#container {
  text-decoration-line: none;
  color: black;
  font-size: 8px;
  /*font-weight: bold;*/
  font-family: '微软雅黑', emoji;
}

/deep/ .el-dialog__body {
  padding: 0;
}

/deep/ .el-dialog__header {
  padding: 0;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>
